<template>
  <div>
    <van-pull-refresh success-text="刷新成功" v-model="refreshing" @refresh="onRefresh">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <div class="waterfall-wrapper">
          <ul class="left-waterfall" ref="left">
            <li class="item" v-for="(item, index) in leftItems" :key="index">
              <WaterFallItem :data="item"/>
            </li>
          </ul>
          <ul class="right-waterfall" ref="right">
            <li class="item" v-for="(item, index) in rightItems" :key="index">
              <WaterFallItem :data="item"/>
            </li>
          </ul>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import WaterFallItem from "./WaterFallItem";

export default {
  props:['data','searchValue'],
  components: {WaterFallItem},
  name:"WaterFall",
  data() {
    return {
      isRefresh:1,
      pageNum: 1,
      pageSize:5,
      loading: true,
      finished: false,
      refreshing: false,
      dataList: [],
      leftItems: [],
      rightItems: [],
      keyWordMid:''
    }
  },
  mounted() {
  },
  created() {
    if(this.data===99){
      this.getGoodsList()
    }else if (this.data===100){
         //  this.getSearchList()
    }
    else {
      this.getGoodsListSome(this.data)
    }
  },
  watch:{
    searchValue:{
      handler(val){
        this.keyWordMid=val.trim()
        this.getSearchList()
      },
      immediate:false
    }
  },
  methods: {
    async getSearchList(){
      this.leftItems=[]
      this.rightItems=[]
      const {data:res} =await this.$http.get('/goods/getSearchList',{
        params:{
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          keyWord:this.keyWordMid
          //这里还要传递搜索的词
        }
      })
      this.dataList=res.result
      this.loading = false
      if (this.dataList.length===0){
        this.finished=true
      }
      this.updateWaterfall()
    },
    async getGoodsList() {
        const {data: res} = await this.$http.get('/goods', {
          params: {
            pageSize: this.pageSize,
            pageNum: this.pageNum
          }
        })
        this.dataList=res.result.list
        this.loading = false
      this.refreshing=false
        if (this.dataList.length===0){
          this.finished=true
        }
      this.updateWaterfall()
    },
    async getGoodsListSome(val) {
      const {data: res} = await this.$http.get('/goods/some', {
        params: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          goods_classify:val
        }
      })
      this.dataList=res.result
      this.loading = false
      this.refreshing=false
      if (this.dataList.length===0){
        this.finished=true
      }
      this.updateWaterfall()
    },
    updateWaterfall() {
      const leftHeight = this.$refs.left.clientHeight
      const rightHeight = this.$refs.right.clientHeight
      let item = this.dataList.shift()
      if (item == null) {
        return
      }
      if (leftHeight <= rightHeight) {
       this.isRefresh==1? this.leftItems.push(item): this.leftItems.unshift(item)
      } else {
        this.isRefresh==1? this.rightItems.push(item): this.rightItems.unshift(item)
      }
      this.$nextTick(function () {
        this.updateWaterfall()
      })
    },
    onLoad() {
      this.isRefresh=1
         this.pageNum++
        if(this.data===99){
          this.getGoodsList()
        }else {
          this.getGoodsListSome(this.data)
        }
    },
    onRefresh() {
      this.isRefresh=2
      this.pageNum++
      if(this.data===99){
        this.getGoodsList()
      }else {
        this.getGoodsListSome(this.data)
      }
    }
  }
}
</script>

<style scoped>
.waterfall-wrapper {
  box-sizing: border-box;
  width: 100%;
  padding: 0 5px;
  overflow: auto;
  /*background-color: rgba(0, 0, 0, 0.05);*/
}

ul {
  width: 49%;
}

ul.left-waterfall {
  float: left;
}

ul.right-waterfall {
  float: right;
}

li.item {
  width: 100%;
  margin-top: 10px;
  border-radius: 7px;
  overflow: hidden;
}

.shabi {
  width: 100%;
}
</style>
